<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <!-- import Element UI CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    /* 消除页面的白边 */
    body {
      margin: 0;
      padding: 0;
    }

    /* 网站Logo后续文本上下居中对其 */
    .nav-menu img {
      vertical-align: middle;
      height: 97px;
    }

    /* 导航菜单链接样式 */
    .nav-menu a {
      color: #666;
      text-decoration: none;
    }

    /* 导航激活 */
    .nav-menu .active {
      color: #0aa1ed;
    }

    /* 导航菜单和商品分类居中 */
    .nav-menu .nav-menu-bar {
      width: 1200px;
      margin: 0 auto;
    }

    .nav-menu {
      border-bottom: #0aa1ed solid 3px;
    }

    /* 商品分类导航栏的背景颜色 */
    .category {
      background-color: #0aa1ed;
    }

    /* 商品分类导航栏搜索框的位置 */
    .category .search-box {
      float: right;
      position: relative;
      top: 10px;
      left: -22px;
    }

    /* 商品分类导航菜单整体宽 */
    .category .el-menu {
      width: 1200px;
      margin: 0 auto;
    }

    /* 内容区域的宽度 */
    .el-main {
      width: 1200px;
      margin: 0 auto;
    }

    /* Top 10 样式 */
    .top-sales h3 {
      font-size: 20px;
      margin: 0;
      padding-bottom: 8px;
      border-bottom: #eee solid 1px;
    }

    /* 商品框样式 */
    .product {
      /* 商品上边距 */
      margin-top: 20px;
    }

    /* 商品标题样式 */
    .product h4 {
      font-size: 14px;
      margin: 0;
      padding: 8px 0;
      border-bottom: #eee solid 1px;
    }

    /* 商品销售数量 */
    .product span {
      float: right;
    }

    /* 商品价格样式 */
    .product b {
      color: #f40;
      font-size: 16px;
    }

    /* 页脚样式 */
    .el-footer .top-border {
      background-image: url('imgs/wave.png');
      height: 90px;
    }

    /* 页脚文字样式 */
    .el-footer .footer-text {
      font-size: 14px;
      background-color: #3f3f3f;
      text-align: center;
      color: #b1b1b1;
      padding: 20px 0;
    }

    .el-footer {
      padding: 0;
    }
  </style>
  <title>商城首页</title>
</head>
<body>
<div id="app">
  <el-container>
    <!-- 头部导航栏 -->
    <el-header class="nav-menu" height="100px">
      <div class="nav-menu-bar">
        <img src="imgs/logo.png" alt="酷鲨商城">
        <a class="active" href="index.html">商城首页</a>
        <el-divider direction="vertical"></el-divider>
        <a href="news.html">热点资讯</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">商家入驻</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">社会招聘</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">校园招聘</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">招采平台</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">商家入驻</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">举报平台</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">快递查询</a>
        <el-divider direction="vertical"></el-divider>
        <a href="">帮助中心</a>
      </div>
    </el-header>
    <!-- 头部导航栏结束 -->
    <!--商品分类开始-->
    <el-header class="category" height="60px">
      <el-menu mode="horizontal"
               background-color="#0aa1ed"
               text-color="#fff"
               active-text-color="#fff"
               :default-actvice="selectedCategoryId"
               @select="handleMenuSelect">
        <el-menu-item
                v-for="category in categories"
                :key="category.id"
                :index="category.id">{{category.name}}
        </el-menu-item>
        <div class="search-box">
          <el-input placeholder="请输入搜索的内容">
            <!-- slot="append"作用是把按钮追加在文本框里面-->
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-menu>
    </el-header>
    <!--商品分类结束-->
    <el-main>
      <!-- 轮播图和排行榜 -->
      <!-- gutter="20"表示每个元素之间的间隔是20px -->
      <el-row gutter="20">
        <!-- 总列数24, span="18"表示占18列 -->
        <el-col span="18">
          <!--轮播图开始-->
          <el-carousel height="300px">
            <el-carousel-item v-for="banner in banners">
              <!--如果属性里面出现变量 必须使用属性绑定,也就是在属性名前面加:-->
              <img :src="banner.image" width="100%" height="100%">
            </el-carousel-item>
          </el-carousel>
          <!--轮播图结束-->
        </el-col>
        <!-- 总列数24, span="6"表示占6列 -->
        <el-col span="6">
          <!--排行榜开始-->
          <el-card class="top-sales">
            <h3>
              <i class="el-icon-medal"></i> 销量最高
            </h3>
            <el-table :data="topSales" height="220px">
              <el-table-column type="index" label="排名"></el-table-column>
              <el-table-column prop="title" label="标题"></el-table-column>
              <el-table-column prop="sales" label="销量"></el-table-column>
            </el-table>
          </el-card>
          <!--排行榜结束-->
        </el-col>
      </el-row>
      <!-- 轮播图和排行榜结束 -->
      <!-- 商品列表开始-->
      <!-- gutter="20"表示每个元素之间的间隔是20px -->
      <el-row gutter="20">
        <el-col span="6" v-for="product in products">
          <el-card class="product">
            <img :src="product.image" width="100%" height="233">
            <h4>{{product.title}}</h4>
            <p style="font-size: 12px">
              <b>￥{{product.discount}}</b>
              <s>{{product.price}}</s>
              <span>销量:{{product.sales}}件</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
      <!--商品列表结束-->
    </el-main>
    <el-footer>
      <div class="top-border"></div>
      <div class="footer-text">
        <p>Copyright © 高慧强学版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
      </div>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!-- import axios -->
<script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: function () {
      return {
        selectedCategoryId: 1,
        categories: [
          {id: 1, name: '精彩活动'},
          {id: 2, name: '精品女装'},
          {id: 3, name: '品牌男装'},
          {id: 4, name: '母婴产品'},
          {id: 5, name: '医药健康'},
          {id: 6, name: '数码科技'}],
        banners: [
          {id: 1, image: 'imgs/b1.jpg'},
          {id: 2, image: 'imgs/b2.jpg'},
          {id: 3, image: 'imgs/b3.jpg'}],
        topSales: [
          {title: '小米手机', sales: 2313},
          {title: '安踏拖鞋', sales: 1859},
          {title: '李宁毛巾', sales: 1536},
          {title: '联想电脑', sales: 965},
          {title: '华为电视', sales: 854},
          {title: '匹克跑鞋', sales: 125}],
        products: [
          {title: '森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古', discount: 233, price: 598, image: 'imgs/a.jpg', sales: 2342},
          {title: '茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装', discount: 233, price: 598, image: 'imgs/b.jpg', sales: 2342},
          {title: '雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins', discount: 233, price: 598, image: 'imgs/c.jpg', sales: 2342},
          {title: '【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬', discount: 233, price: 598, image: 'imgs/d.jpg', sales: 2342},
          {title: 'BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins', discount: 233, price: 598, image: 'imgs/e.jpg', sales: 2342},
          {title: '香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣', discount: 233, price: 598, image: 'imgs/f.jpg', sales: 2342},
          {title: 'SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦', discount: 233, price: 598, image: 'imgs/g.jpg', sales: 2342},
          {title: '美特斯邦威女MTEE 贺岁系列中长款风衣736598', discount: 233, price: 598, image: 'imgs/h.jpg', sales: 2342},
          {title: 'imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套', discount: 233, price: 598, image: 'imgs/i.jpg', sales: 2342},
          {title: 'BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣', discount: 233, price: 598, image: 'imgs/j.jpg', sales: 2342},
          {title: '憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外', discount: 233, price: 598, image: 'imgs/k.jpg', sales: 2342},
          {title: '美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔', discount: 233, price: 598, image: 'imgs/a.jpg', sales: 2342}]
      }
    },
    methods: {
      //获取分类
      getCategories() {
        axios.get('/home/categories').then(res => {
          this.categories = res.data
          //设置默认选定的分类ID
          this.selectedCategoryId = this.categories[0].id
          this.getProductsByCategoryId()
        })
      },
      //获取轮播图
      getBanners() {
        axios.get('/home/banners').then(res => {
          this.banners = res.data
        })
      },
      handleMenuSelect(key, keyPath) {
        this.selectedCategoryId = key
        this.getProductsByCategoryId()
      },
      //根据当前分类ID获取商品列表
      getProductsByCategoryId() {
        axios.get('/home/categories/'+ this.selectedCategoryId +'/products').then(res => {
          this.products = res.data
        })
      },
    },
    mounted() {
      this.getCategories()
      this.getBanners()
    }
  })
</script>
</html>